<template>
	<view class="page-fabulous padding-top-sm">
		<view class="cu-list menu sm-border custom-list">
			<block v-for="(item,index) of list" :key="index">
				<view class="cu-item">
					<view class="comment-cont">
						<view class="flex align-start justify-start margin-right">
							<image class="cu-avatar round custom-avatar margin-right-xs flex-shrink" :src="item.avatar" />
							<view class="text-sm">
								<view class="textcut">{{item.nickname}}</view>
								<view class="hidden2">{{item.content}}</view>
								<view class="text-xs text-666">{{item.create_time_man}}</view>
							</view>
						</view>
						<view class="comment-more" v-if="item.comments.length">
							<view :class="['comment-more-cont',item.comments.length>4?'comment-more-cont-height':'',item.isShowMore?'comment-more-cont-auto':'comment-more-cont-hidden']">
								<view v-for="(elem,index) of item.comments" :key="elem.id" style="height:35rpx;">
									<text>{{elem.nickname}}:{{elem.content}}</text>
								</view>
							</view>
							<view class="comment-more-btn" @click.stop="showMoreReply(index)" v-if="item.comments.length>4&&!item.isShowMore">
								查看全部{{item.comments.length}}条回复
							</view>
						</view>
					</view>
					
					<view class="action custom-right" @click="showDetail(item.video_id)">
						<view class="img-box-play">
							<image src="/static/images/play-01.png" mode="widthFix"></image>
						</view>
						<view class="fabilous-content text-xs">
							<image :src="item.video_img" mode="aspectFit"/>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import profileMixin from "@/mixins/profile"
	export default {
		mixins: [profileMixin],
		data() {
			return {
				query: {
					page: 1,
					size: 10
				}
			};
		},
		methods: {
			showDetail(id) {
				this.$h.router.push({
					path: "/pages/video/videoDetail",
					params: {
						id
					}
				})
			},
			getList(){
				let fn = list => {
					return list.map(item => ({ ...item,
						isShowMore: false
					}))
				}
				this.m_getList(this.$h.api.userModel.getRecieveComments, this.query,fn)
			},
			showMoreReply(index){
				let list=this.$h.utils.deepClone(this.list)
				list[index].isShowMore=true
				this.list=[...list]
			},
		},
		async onLoad() {
			this.getList()
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.page-fabulous {
		.cu-list.menu.sm-border.custom-list {
			.cu-item {
				padding:0 20rpx 20rpx 20rpx;
				align-items: start;
				&::after {
					border-bottom: 2rpx solid $bgColor;
					left: 20rpx;
					width: calc(200% - 40px);
				}
		
				.cu-avatar.custom-avatar {
					width: 50rpx;
					height: 50rpx;
				}
		
				.custom-left {
					height: 80rpx;
				}
		
				.action.custom-right {
					position: relative;
					.fabilous-content {
						width: 180rpx;
						height: 140rpx;
						background-color: $bgColor;
						border-radius: 12rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
		
					.img-box-play {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						z-index:1000
					}
				}
				.comment-cont{
					flex:1;
					display: flex;
					flex-direction: column;
					.comment-more {
						width: 70%;
						margin-top: 10rpx;
						margin-left:50rpx;
						background: rgba(237, 237, 237, 1);
						border-radius: 10rpx;
						padding: 20rpx;
						&-cont {
							display: flex;
							flex-direction: column;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(52, 52, 54, 1);
							&-auto{
								height: auto !important;
							}
							&-hidden{
								overflow: hidden;
							}
						}
						&-cont-height{
							height:140rpx;
						}
					
						&-btn {
							margin-top: 6rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: rgba(226, 78, 71, 1);
						}
					}
				}
			}
		}
	}
</style>
